<template>
  <a-flex justify="center">
    <div style="width: 400px">
      <a-form
        ref="formRef"
        name="dynamic_form_nest_item"
        :model="dynamicValidateForm"
        @finish="onFinish"
      >
        <a-space
          v-for="(user, index) in dynamicValidateForm.users"
          :key="user.id"
          style="display: flex; margin-bottom: 8px"
          align="baseline"
        >
          <a-form-item
            :name="['users', index, 'first']"
            :rules="{
              required: true,
              message: 'Missing first name',
            }"
          >
            <a-input v-model:value="user.first" placeholder="First Name" />
          </a-form-item>
          <a-form-item
            :name="['users', index, 'last']"
            :rules="{
              required: true,
              message: 'Missing last name',
            }"
          >
            <a-input v-model:value="user.last" placeholder="Last Name" />
          </a-form-item>
          <MinusCircleOutlined @click="removeUser(user)" />
        </a-space>
        <a-form-item>
          <a-button type="dashed" block @click="addUser">
            <PlusOutlined />
            Add user
          </a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">Submit</a-button>
        </a-form-item>
      </a-form>
    </div>
  </a-flex>
</template>
<script lang="ts" setup name="DynamicForm">
import { reactive, ref } from 'vue'
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons-vue'
import type { FormInstance } from 'ant-design-vue'

interface User {
  first: string
  last: string
  id: number
}
const formRef = ref<FormInstance>()
const dynamicValidateForm = reactive<{ users: User[] }>({
  users: [
    {
      first: '',
      last: '',
      id: Date.now(),
    },
  ],
})
const removeUser = (item: User) => {
  const index = dynamicValidateForm.users.indexOf(item)
  if (index !== -1) {
    dynamicValidateForm.users.splice(index, 1)
  }
}
const addUser = () => {
  dynamicValidateForm.users.push({
    first: '',
    last: '',
    id: Date.now(),
  })
}
const onFinish = (values: any) => {
  console.log('Received values of form:', values)
  console.log('dynamicValidateForm.users:', dynamicValidateForm.users)
}
</script>
